<template>
	<!-- 头像/信息在右边 -->
	<div class="msg-contatiner">
		<div class="msg-empty"></div>
		<div class="msg-content">
			<div class="msg-txt">
				{{msg.content}}
			</div>
		</div>
		<div class="msg-user">
			<van-image class="msg-header" :src="user.header"></van-image>
			<div class="msg-account">{{msg.from}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			'user': {
				type: Object,
				required: false
			},
			'msg': {
				type: Object,
				required: false
			}
		},
		data() {
			return {}
		},
		methods: {

		},

	}
</script>

<style lang="scss" scoped>
	.msg-contatiner {
		display: flex;
		min-height: 50px;
		align-items: center;
		margin-top: 8px;
		padding-right: 8px;

		& .msg-empty {
			flex: 1;
		}

		& .msg-content {
			display: flex;
			text-align: right;
			align-items: center;
			padding-right: 8px;
			margin-left: 64px;
			margin-right: 8px;
			min-height: 52px;

			& .msg-txt {

				width: auto;

				background-color: #FFFFFF;
				border-radius: 10px;
				padding: 6px 12px 6px 12px;

			}
		}

		& .msg-user {

			position: relative;
			width: 52px;
			height: 52px;
			align-items: center;

			& .msg-header {
				position: absolute;
				height: 52px;
				width: 52px;
				bottom: 0;
			}

			& .msg-account {
				height: 20px;
				position: absolute;
				font-size: 10px;
				color: antiquewhite;
				line-height: 20px;
				width: 100%;
				bottom: 0;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				background-color: rgba(0, 0, 0, 0.2);
				text-align: center;
				margin: auto 0;
			}
		}
	}
</style>